<template>
  <div class="condition-item " :class="c_style">
    <div class="condition-group">
      <div class="group-title1">{{ title1 }}</div>
      <div class="group-title2">
        <i-count-up
            :delay="delay"
            :endVal="data1"
            :options="options"
        />
      </div>
    </div>
    <div class="shuxian"></div>
    <div class="condition-group">
      <div class="group-title1">{{ title2 }}</div>
      <div class="group-title2">
        <i-count-up
            :delay="delay"
            :endVal="data2"
            :options="options"
        />
      </div>
    </div>
  </div>
</template>

<script>

import ICountUp from "vue-countup-v2";
export default {
  components: {
    "i-count-up":ICountUp
  },
  name: "card",
  data() {
    // let endVal = this.data;
    return {
      delay: 1000,
      // endVal: endVal,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: "",
      },
    };
  },
  computed: {
    data1Number() {
      return this.formatNumber(this.data1, ",", 3);
    },
    data2Number() {
      return this.formatNumber(this.data2, ",", 3);
    },
  },
  methods:{
    formatNumber(value, seperator, digitNum) {
      var initV = value;
      if (
          (value = (value = value + "").replace(/^\s*|\s*$|,*/g, "")).match(
              /^\d*\.?\d*$/
          ) == null
      )
        return initV;
      value = digitNum >= 0 ? Number(value).toFixed(digitNum) + "" : value;
      var r = [],
          tl = value.split(".")[0],
          tr = value.split(".")[1];
      tr = typeof tr != "undefined" ? tr : "";
      if (seperator != null && seperator != "") {
        while (tl.length >= 3) {
          r.push(tl.substring(tl.length - 3));
          tl = tl.substring(0, tl.length - 3);
        }
        if (tl.length > 0) r.push(tl);
        r.reverse();
        r = r.join(seperator);
        return tr == "" ? r : r + "." + tr;
      }
      return value;
    },
    onReady: function (instance, CountUp) {
      const that = this;
      instance.update(that.data);
    },
  },
  props: {
    title1: {
      type: String,
      default() {
        return "卡片标题";
      },
    },
    data1: {
      type: String,
      default() {
        return 170000000;
      },
    },
    title2: {
      type: String,
      default() {
        return "卡片标题";
      },
    },
    c_style: {
      type: String,
      default() {
        return "blue"
      }
    },
    data2: {
      type: String,
      default() {
        return 170000000;
      },
    }
  }
}
</script>

<style scoped>

.group-title1 {

  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #FFFFFF;

}

.group-title2 {
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 60px;
}



.condition-item {
  width: 30%;
  height: 101px;
  padding-left: 30px;
  color: #FFFFFF;

  padding-top: 24px;
  align-items: center;
  display: flex;
}

.shuxian {
  margin-left: 30px;
  margin-right: 30px;
  width: 1px;
  height: 36px;
  background: #FFFFFF;
}

.lan {
  background: #009944;
}

.orange {

  background: #FE7200;
}

.blue {
  background: #0076FE;
}
</style>